<template>
  <div class="content">
    <van-sticky>
      <van-nav-bar
        @click-left="$router.back()"
        left-arrow
        title="实名认证"
      ></van-nav-bar>
    </van-sticky>
    <div class="main">
      <van-field v-model="name" label="姓名：" placeholder="请输入姓名" />
      <van-field
        v-model="idnumber"
        clearable
        label="身份证："
        placeholder="请输入身份证号"
      />
    </div>
    <div class="shenfenmsg">
      <!-- <div class="contents">
                <div class="contents-item">
                    <p>身份证正面</p>
                    <span>上传你的身份证人面像</span> 
                </div>
                <div class="contents-item">
                    <label for="upload">
                        <div class="renlians">
                            <input id="upload" type="file" accept="image/*" @change="updateFacesfzzm" class="abc">
                             <img v-if="sfzzmimg" :src="sfzzmimg" alt="">
                        </div>
                    </label>
                </div>
            </div>

            <div class="contents">
                <div class="contents-item">
                    <p>身份证反面</p>
                    <span>上传您的身份证国徽面</span> 
                </div>
                <div class="contents-item">
                    <label for="upload1">
                        <div class="renlianss">
                            <input id="upload1" type="file" accept="image/*" @change="updateFacesfzfm" class="abc">
                             <img v-if="sfzfmimg" :src="sfzfmimg" alt="">
                        </div>
                    </label>
                </div>
            </div> -->
    </div>

    <div class="contents-btn" @click="renlianshibie">
      <span>保存</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "", //姓名
      idnumber: "", //身份证号
      sfzzmimg: "",
      sfzfmimg: "",
      yyzzimg: "",
    };
  },
  async mounted() {
    this.rzTiaozhuan();
  },
  created() {
    document.querySelector("#app").style.width = "100%";
    document.querySelector("#app").style.height = "100vh";
    document.querySelector("#app").style.backgroundColor = "#f3f5f7";
  },
  methods: {
    rzTiaozhuan() {
      if (JSON.parse(this.getQueryString("response")) == null) {
        return;
      } else {
        if (
          JSON.parse(this.getQueryString("response")).code == "0000" &&
          JSON.parse(this.getQueryString("response")).passed == "T"
        ) {
          return this.$router.replace({
            path: "/message",
            query: {
              msg: 5,
              passed: JSON.parse(this.getQueryString("response")).passed,
            },
          });
        }

        this.$router.replace({
          path: "/message",
          query: {
            msg: 6,
          },
        });
      }
    },
    // updateFacesfzzm(e) {
    //     const file = e.target.files[0] || e.dataTransfer.files[0]
    //     let reader = new FileReader()
    //     reader.readAsDataURL(file)
    //     reader.onload=()=>{
    //     this.sfzzmimg = reader.result
    //     }
    // },
    // updateFacesfzfm(e) {
    //     const file = e.target.files[0] || e.dataTransfer.files[0]
    //     let reader = new FileReader()
    //     reader.readAsDataURL(file)
    //     reader.onload=()=>{
    //     this.sfzfmimg = reader.result
    //     }
    // },

    // 人脸识别
    renlianshibie() {
      if (this.name == "") {
        this.$toast("请输入姓名");
        return;
      }
      if (this.idnumber == "") {
        this.$toast("请输入身份证号");
        return;
      }
      let obj = {
        idName: this.name,
        idNumber: this.idnumber,
        returnUrl: "http://wx-001.unionnetwork.com/certification",
        userId: this.$store.state.userInfo.id,
      };
      this.$api.renLianShibie(obj).then((res) => {
        if (res.data.code == "0000") {
          window.location.href = res.data.url;
        } else {
          this.$toast(res.data.msg);
        }
      });
    },
    // 解析url地址
    getQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      let r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURIComponent(r[2]);
      }
      return null;
    },
    // 上传身份证删除
    deleteAxiosimg() {},
  },
};
</script>
<style lang="less" scoped>
.contents {
  padding: 10px;
  margin: 10px;
  height: 100px;
  opacity: 1;
  background: #ffffff;
  border-radius: 0.8em;
  box-shadow: 0px 6px 12px 0px #e9e9e9;
  display: flex;
  line-height: 50px;
  justify-content: space-between;
  .contents-item {
    p {
      width: 112px;
      height: 40px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #333333;
    }
    span {
      width: 330px;
      height: 30px;
      font-size: 10px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #d0d3db;
    }
    .renlians {
      width: 140px;
      height: 90px;
      position: relative;
      margin-right: 15px;
      background-image: url("../../assets/images/wallet/sfzzm.png");
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      background-position: center 0;
      input {
        width: 140px;
        height: 90px;
        display: none;
      }
      img {
        width: 140px;
        height: 90px;
      }
    }
    .renlianss {
      width: 140px;
      height: 90px;
      position: relative;
      margin-right: 15px;
      background-image: url("../../assets/images/wallet/sfzghm.png");
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      background-position: center 0;
      input {
        width: 140px;
        height: 90px;
        display: none;
      }
      img {
        width: 140px;
        height: 90px;
      }
    }
    .renliansss {
      width: 140px;
      height: 94px;
      position: relative;
      margin-right: 15px;
      background-image: url("../../assets/images/wallet/yyzz.png");
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      background-position: center 0;
      input {
        width: 140px;
        height: 94px;
        display: none;
      }
      img {
        width: 140px;
        height: 94px;
      }
    }
  }
}
.contents-btn {
  width: 80%;
  height: 40px;
  opacity: 1;
  background: #477fe6;
  border-radius: 41px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  margin: 80px auto;
}
</style>
